import { CloseOutlined } from '@ant-design/icons';
import { Button, Drawer, Modal, Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { Fragment } from 'react';

import hooks from '../../hooks';
import Modifier from './Modifier';

import type { IRoleGroup } from '@/types/systemManagement/role';
import { useModel } from 'umi';
/**
 * 授权组配置
 * @param param0
 * @returns
 */
export default function RoleGroupDrawer({
  visible,
  onCancel,
}: {
  visible?: boolean;
  onCancel?: () => void;
}) {
  const {
    roleGroupHooks: { roleGroupTableHooks, saveRoleGroupReq, queryAppRoleReq, deleteRoleGroupReq },
  } = hooks.useContainer();

  const modal = {
    show: (val?: any) => { },
    props: {},
    onSubmit: () => { }

  }
  //  useModal<IRoleGroup>({
  //   onSubmit(vals) {
  //     return saveRoleGroupReq.runAsync(vals);
  //   },
  // });
  const { hasPermisson } = useModel('useUser', (model) => {
    return {
      hasPermisson: model.getRole,
    };
  });

  const columns: ColumnsType<IRoleGroup> = [
    {
      title: '授权组ID',
      dataIndex: 'id',
      width: 90,
    },
    {
      title: '授权组名称',
      dataIndex: 'groupName',
      key: 'groupName',
      width: 120,
    },
    {
      title: '包含角色',
      dataIndex: 'roleIdList',
      key: 'roleIdList',
      render(roleIdList) {
        const labels = queryAppRoleReq.data
          ?.filter((it) => roleIdList.includes(it.value))
          .map((it) => {
            return it.label;
          });

        return <span>{(labels ?? []).toString()}</span>;
      },
    },
    {
      title: '授权描述',
      dataIndex: 'remake',
      key: 'remake',
      width: 120,
      ellipsis: true,
    },
    {
      title: '操作',
      fixed: 'right',
      width: 120,
      render: (_: unknown, row: IRoleGroup) => {
        return (
          <Fragment>
            <Button
              type="link"
              disabled={!hasPermisson('UPDATE_AUTH_GROUP')}
              onClick={() => {
                modal.show(row);
              }}
              style={{ padding: 0 }}
            >
              编辑
            </Button>
            {/* <a
              onClick={() => {
                modal.show(row);
              }}
            >
              编辑
            </a> */}
            {/* <a
              style={{ marginLeft: 10 }}
              onClick={() => {
                Modal.confirm({
                  title: '确人删除本授权组，删除后无法恢复?',
                  onOk: () => deleteRoleGroupReq.runAsync(row.groupCode),
                });
              }}
            >
              删除
            </a> */}
            <Button
              type="link"
              danger
              style={{ marginLeft: 10, padding: 0 }}
              disabled={!hasPermisson('DELETE_AUTH_GROUP')}
              onClick={() => {
                Modal.confirm({
                  title: '确人删除本授权组，删除后无法恢复?',
                  onOk: () => deleteRoleGroupReq.runAsync(row.groupCode),
                });
              }}
            >
              删除
            </Button>
          </Fragment>
        );
      },
    },
  ];

  return (
    <Drawer
      title={<div style={{ fontSize: 20 }}>授权组管理</div>}
      open={visible}
      onClose={onCancel}
      placement="right"
      destroyOnClose
      width={800}
      extra={<CloseOutlined onClick={onCancel} />}
      closable={false}
    >
      <Button
        style={{ marginBottom: 20 }}
        disabled={!hasPermisson('ADD_AUTH_GROUP')}
        type="primary"
        onClick={() => {
          modal.show();
        }}
      >
        新增授权组
      </Button>

      <Table rowKey="id" columns={columns} {...roleGroupTableHooks.tableProps} />

      <Modifier {...modal.props} roleOptions={queryAppRoleReq.data ?? []} />
    </Drawer>
  );
}
